<script setup lang="ts">
import SvgIcon from "../Tool/svg-icon.vue";
import Chart from "../Tool/chart.vue";
import {onMounted, reactive, ref} from "vue";
import Statistic from "../Tool/statistic.vue";
import {LeiToolsBillDatabase, LeiToolsNotebookDatabase, NotebookInterface, BillInterface, queryTable} from "../../lib/database.ts";
import NoteLine from "./NoteLine.vue";

const noteNumber = ref<number>()
const noteList = ref<NotebookInterface[]>()
const notebook = new LeiToolsNotebookDatabase('./sqlite.db')
const bill = new LeiToolsBillDatabase('./sqlite.db')
const outcome = ref(0)
const income = ref(0)

onMounted(async () => {
    if (await queryTable('bill')) {
        // 获取收支情况
        await bill.open()
        // 查询全部支出的表格
        const outcomeData = (await bill.query("label = '支出'")) as BillInterface[]
        // 查询全部收入的表格
        const incomeData = (await bill.query("label = '收入'")) as BillInterface[]
        // 计算总支出
        outcome.value = outcomeData.reduce((acc, cur) => acc + (cur.money as number), 0)
        // 计算总收入
        income.value = incomeData.reduce((acc, cur) => acc + (cur.money as number), 0)
        console.log(income.value, outcome.value)
    }
    if (await queryTable('notebook')) {
        // 获取notebook的数据，更新到对位位置
        await notebook.open()
        noteList.value = (await notebook.query()) as NotebookInterface[]
        noteNumber.value = noteList.value.length
    }
})

const option1 = reactive({
    title: {
        text: 'Rainfall vs Evaporation',
        subtext: 'Fake Data'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Rainfall', 'Evaporation']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Rainfall',
            type: 'bar',
            data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ],
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                data: [{type: 'average', name: 'Avg'}]
            }
        },
        {
            name: 'Evaporation',
            type: 'bar',
            data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ],
            markPoint: {
                data: [
                    {name: 'Max', value: 182.2, xAxis: 7, yAxis: 183},
                    {name: 'Min', value: 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine: {
                data: [{type: 'average', name: 'Avg'}]
            }
        }
    ]
})
const option2 = reactive({
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
})
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>

<template>
    <el-card class="home-card">
        <el-row>
            <el-col :span="8">
                <el-avatar :size="60">
                    <el-icon :size="50">
                        <svg-icon name="vue" width="45px" height="45px"/>
                    </el-icon>
                </el-avatar>
                <el-space alignment="center" direction="vertical" style="padding-left: 10px; height: 60px; align-items: start">
                    <h1 style="padding: 0; margin: 0; ">Hello Vue!</h1>
                    <span>Welcome to Vue</span>
                </el-space>
            </el-col>
            <el-col :span="16" style="display: flex; justify-content: end; align-items: end">
                <el-space direction="vertical" style="padding-right: 45px">
                    <span class="title">笔记数</span>
                    <span class="content">{{ noteNumber }}</span>
                </el-space>
                <el-space direction="vertical" style="margin-right: 45px">
                    <span class="title">收入数</span>
                    <span class="content">{{ income }}</span>
                </el-space>
                <el-space direction="vertical" style="margin-right: 15px">
                    <span class="title">支出数</span>
                    <span class="content">{{ outcome }}</span>
                </el-space>
            </el-col>
        </el-row>
    </el-card>
    <el-card class="home-card" body-style="padding: 10px">
        <el-row :gutter="8">
            <el-col :span="6">
                <el-card body-style="padding: 10px" class="card-gradient1">
                    <h4 style="margin: 0">文档数</h4>
                    <div class="card-div">
                        <el-icon :size="40">
                            <svg-icon name="number" width="45px" height="45px"/>
                        </el-icon>
                        <statistic :value="noteNumber" :precision="0"/>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card body-style="padding: 10px" class="card-gradient2">
                    <h4 style="margin: 0">账单支出</h4>
                    <div class="card-div">
                        <el-icon :size="40">
                            <svg-icon name="outcomeCalc" width="45px" height="45px"/>
                        </el-icon>
                        <statistic :value="outcome" :precision="0"/>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card body-style="padding: 10px" class="card-gradient3">
                    <h4 style="margin: 0">账单收入</h4>
                    <div class="card-div">
                        <el-icon :size="40">
                            <svg-icon name="incomeCalc" width="45px" height="45px"/>
                        </el-icon>
                        <statistic :value="income" :precision="0"/>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card body-style="padding: 10px" class="card-gradient4">
                    <h4 style="margin: 0">使用时长</h4>
                    <div class="card-div">
                        <el-icon :size="40">
                            <svg-icon name="clock" width="45px" height="45px"/>
                        </el-icon>
                        <statistic/>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
    <el-card class="home-card">
        <chart :option="option1" :height="'400px'"/>
    </el-card>
    <el-row class="home-card" :gutter="5">
        <el-col :span="12">
            <el-card>
                <chart :option="option1" :height="'400px'"/>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <chart :option="option2" :height="'400px'"/>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="5">
        <el-col :span="16">
            <el-card>
                <el-table :data="tableData" stripe style="width: 100%" table-layout="fixed">
                    <el-table-column prop="date" label="Date" width="180"/>
                    <el-table-column prop="name" label="Name" width="180"/>
                    <el-table-column prop="address" label="Address"/>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card>
                <template #header>
                    <div style="display: flex; justify-content: space-between; ">
                        <span>笔记列表</span>
                        <el-link type="primary">更多操作</el-link>
                    </div>
                </template>
                <note-line v-for="item in noteList" :title="item.title" :create-time="item.createTime"/>
            </el-card>
        </el-col>
    </el-row>
</template>

<style scoped lang="css">
.title {
    font-size: 14px;
    color: var(--home-title-color);
}

.content {
    font-size: 24px;
}

.home-card {
    margin-bottom: 8px;
}

.card-div {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.card-gradient1 {
    background-image: linear-gradient(to right bottom, rgb(236, 71, 134), rgb(185, 85, 164));
}

.card-gradient2 {
    background-image: linear-gradient(to right bottom, rgb(134, 94, 192), rgb(81, 68, 180));
}

.card-gradient3 {
    background-image: linear-gradient(to right bottom, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.card-gradient4 {
    background-image: linear-gradient(to right bottom, #FAD961 0%, #F76B1C 100%);
}
</style>